<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../static//image/logo.png">
    <link rel="stylesheet" href="../css/login.css" />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css@master/dist/aqua.min.css'>
    <link rel="stylesheet" href="../css/style.css">
    
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <!-- <script src="../static/jq/jquery-3.3.1.min.js"></script> -->
    <!-- font-awesome图标库 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>无聊人|登录</title>
  </head>
  <body>
      <!-- 流星背景 -->
    <div class="stars">
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
    </div>

    
 <!-- 登录表单 -->
    <div class="container">
      <h1 style="text-shadow: 10px 10px 8px black;">无聊人</h1>
      <!-- <img src="../static//image/bannerlogo.png" alt="banner" width="400px" height="200px"> -->
      <form action="">
        <input class="tbx" type="text" placeholder="账号" autofocus minlength="6" required />
        <input class="tbx" type="password" placeholder="密码" minlength="6" required/>
        <a href="./home.html"><input class="sub" type="button" value="登录"></a>
         <!-- <input class="sub" type="submit" value="登录" /> -->
      </form>

  
    </div>

    
      

    <script>
      // 定义一个con绑定 .container
      const con = document.querySelector(".container");

      // 定义两个函数开关（门）
      let isIn = true; //鼠标进去的门，默认打开
      let isOut = false; //鼠标出去的门，默认关闭

      var span; //给未出生的元素取个名字

      //监听鼠标进去的事件+进去的方法
      con.addEventListener("mouseenter", (e) => {
        if (isIn) {
          //如果进去的门时打开的，就可以执行这个函数

          //获取进入的鼠标位置
          //生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
          let inx = e.clientX - e.target.offsetLeft;
          let iny = e.clientY - e.target.offsetTop;

          //创建一个span元素，并且给它对应的出生坐标
          let el = document.createElement("span");
          el.style.left = inx + "px";
          el.style.top = iny + "px";
          con.appendChild(el); //添加到con对应的父元素，即container

          $(".container span").removeClass("out"); //除去出去的动画 不知道这样写是不是不太好
          $(".container span").addClass("in"); //添加进入的动画
          span = document.querySelector(".container span");
          isIn = false; //关闭进来的门（不能使用进入的方法）
          isOut = true; //打开出去的门（可以使用出去的方法）
        }
      });

      //监听鼠标出来的事件+出来的方法
      con.addEventListener("mouseleave", (e) => {
        if (isOut) {
          //获取出去的鼠标位置
          //生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
          let inx = e.clientX - e.target.offsetLeft;
          let iny = e.clientY - e.target.offsetTop;

          //
          $(".container span").removeClass("in"); //移除进入的动画
          $(".container span").addClass("out"); //添加出去的动画
          $(".out").css("left", inx + "px"); //添加出去的坐标
          $(".out").css("top", iny + "px");

          isOut = false; //关闭出去的大门

          //当动画结束后再删除元素
          setTimeout(() => {
            con.removeChild(span); //删除元素
            isIn = true; //打开进来的大门
          }, 500);
        }
      });
    </script>
  </body>
</html>
